<template>
	<view style="width: 100%;height: 100%;">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">交易详情</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<!-- 顶部位置占位 -->
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
		<view class="detail-content">
			<view class="content-top">
				<view class="top-title d-flex a-center j-center">
					<image class="title-icon" src="../../static/image/lingqian.png"></image>
					<view class="title-text">我的零钱</view>
				</view>
				<view class="top-money d-flex a-center j-center">{{centToYuan(pageData.amount)}}</view>
				<view class="top-commission d-flex a-center j-center">瘦身群手续费：¥{{centToYuan(pageData.fee)}}</view>
			</view>
			<!-- 间隔 -->
			<view style="height: 20rpx;"></view>
			<view class="content-below">
				<view class="below-title d-flex a-center">
					<text class="bj"></text>
					<text class="name">订单详情</text>
				</view>
				<view class="title-detail d-flex a-center">
					<view class="detail-l">类型</view>
					<view class="detail-r">{{transactionDetailType[pageData.type-1]}}</view>
				</view>
				<!--
				<view v-if="pageData.type!=3" class="title-detail d-flex a-center">
					<view class="detail-l">付款方</view>
					<view v-if="pageData.type==1" class="detail-r">{{pageData.joinUserName}}</view>
					<view v-if="pageData.type==2" class="detail-r">{{pageData.userName}}</view>
				</view>
				-->
				<view class="title-detail d-flex a-center">
					<view class="detail-l">时间</view>
					<view class="detail-r">{{pageData.createTime}}</view>
				</view>
				<view class="title-detail d-flex a-center">
					<view class="detail-l">交易单号</view>
					<view class="detail-r">{{pageData.id}}</view>
				</view>
				<!--
				<view class="title-detail d-flex a-center">
					<view class="detail-l">收款方</view>
					<view v-if="pageData.type==1" class="detail-r">{{pageData.userName}}</view>
					<view v-if="pageData.type==2" class="detail-r">{{pageData.joinUserName}}</view>
					<view v-if="pageData.type==3" class="detail-r">{{pageData.userName}}</view>
				</view>
				-->
				<view class="title-detail d-flex a-center">
					<view class="detail-l">支付方式</view>
					<view class="detail-r">{{transactionDetailChannel[pageData.type-1]}}</view>
				</view>
				<view class="title-detail d-flex a-center">
					<view class="detail-l">交易状态</view>
					<view v-if="pageData.status==1" class="detail-r">待生效</view>
					<view v-if="pageData.status==2" class="detail-r">已生效</view>
					<view v-if="pageData.status==3" class="detail-r">已退款</view>
					<view v-if="pageData.status==6" class="detail-r">退款成功</view>
					<view v-if="pageData.status==10" class="detail-r">待审核</view>
					<view v-if="pageData.status==20" class="detail-r">提现成功</view>
					<view v-if="pageData.status==30" class="detail-r">提现失败，金额已返还</view>
				</view>
				<view class="title-detail d-flex" style="height: auto;">
					<view class="detail-l" style="padding-top: 15rpx;">备注</view>
					<view class="detail-r" style="padding-top: 15rpx;">{{pageData.note}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="tsx"  name="transactionDetail">
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { centToYuan } from "@/utils/format";
const goBack = () => {
	    uni.navigateBack();
};
let transactionDetailType:any = ref(["入账","退款","提现"])//交易类型
let transactionDetailChannel:any = ref(["微信","支付宝"])//交易渠道
let pageData:any = ref();
onLoad((options:any)=>{
	const params = JSON.parse(options.params);  
	pageData.value = params;
	console.log(params)
});
</script>

<style lang="scss" scoped>
@import "./transactionDetail.scss";
</style>
